<template>
  <div id="app">
    <!-- 顶部导航 -->
    <div class="header">
      <div class="header-content">
        <div class="header-title">公告详情</div>
        <div style="width: 20px;" />
      </div>
    </div>

    <!-- 公告内容 -->
    <div v-if="currentNotice" class="notice-container">
      <div class="notice-card">
        <div class="notice-header">
          <h1 class="notice-title">{{ currentNotice.tgTitle }}</h1>
          <div class="notice-meta">
            <div class="meta-item">
              <i class="fas fa-calendar-alt" />
              <span>{{ currentNotice.addTime }}</span>
            </div>
            <div class="meta-item">
              <i class="fas fa-map-marker-alt" />
              <span>{{ currentNotice.tgType }}</span>
            </div>
          </div>
        </div>

        <div class="notice-content">
          <p class="content">{{ currentNotice.content }}</p>
        </div>

        <div v-if="businessIds.length > 1" class="notice-footer">
          <div class="notice-actions">
            <button class="action-btn prev" :disabled="currentIndex === 0" @click="prevNotice">
              <i class="fas fa-chevron-left" />上一条
            </button>
            <div class="nav-info">{{ currentIndex + 1 }}/{{ businessIds.length }}</div>
            <button class="action-btn next" :disabled="currentIndex === businessIds.length - 1" @click="nextNotice">
              下一条<i class="fas fa-chevron-right" />
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 当没有公告ID时的提示 -->
    <div v-else class="notice-container">
      <van-empty description="未找到公告信息" image="error" />
    </div>
  </div>

</template>

<script>
// import { Toast } from 'vant'
import { pushShowNotice, pushShowNoticeDetail } from '@/api/mobile/index'

export default {
  name: 'NoticeDetail',
  data() {
    return {
      userId: null,
      // 当前URL信息
      currentUrl: window.location.href,
      queryParams: window.location.search,
      businessIdParam: '',

      // 从URL获取的businessId参数
      businessIds: [],
      // 当前显示的公告索引
      currentIndex: 0,
      // 所有公告数据
      notices: []
    }
  },
  computed: {
    // 当前显示的公告
    currentNotice() {
      if (this.businessIds.length === 0) return null
      const currentId = this.businessIds[this.currentIndex]
      return this.notices.find(notice => notice.id === currentId) || null
    }
  },
  async mounted() {
    // 从 URL 获取 code
    const urlParams = new URLSearchParams(window.location.search)
    const userId = urlParams.get('userId')

    if (userId) {
      this.userId = userId
    }

    this.parseUrlParams()
  },
  methods: {
    // 解析URL参数
    async parseUrlParams() {
      // 获取查询参数
      const queryString = window.location.search
      this.queryParams = queryString

      // 解析查询参数
      const params = new URLSearchParams(queryString)

      if (params.has('id')) {
        const res = await pushShowNoticeDetail({ id: params.get('id') })
        this.notices = [res]
        this.businessIds = [res.id]
      } else {
      // 获取businessId参数
        if (params.has('businessId')) {
          this.businessIdParam = params.get('businessId')
          const ids = this.businessIdParam.split(',')

          // 转换为数字数组
          this.businessIds = ids.map(id => parseInt(id.trim())).filter(id => !isNaN(id))

          console.log('解析到的businessId:', this.businessIds)
        }

        // 如果没有传入ID，默认显示第一条
        if (this.businessIds.length === 0 && this.notices.length > 0) {
          console.log('没有有效的businessId，默认显示第一条公告')
          this.businessIds = [this.notices[0].id]
        }

        const res = await pushShowNotice({ userId: this.userId, businessId: this.businessIds.join(), messageId: 1 })
        this.notices = res.map((item, index) => {
          return { ...item, id: this.businessIds[index] }
        })
      }
    },

    // 上一条公告
    prevNotice() {
      if (this.currentIndex > 0) {
        this.currentIndex--
        this.updateUrl()
      }
    },

    // 下一条公告
    nextNotice() {
      if (this.currentIndex < this.businessIds.length - 1) {
        this.currentIndex++
        this.updateUrl()
      }
    },

    // 更新URL（不刷新页面）
    updateUrl() {
      const newUrl = `${window.location.pathname}?businessId=${this.businessIds.join(',')}`
      window.history.replaceState(null, '', newUrl)
      this.currentUrl = window.location.href
      this.queryParams = window.location.search
    },

    // 查看公告
    viewNotice(id) {
      // 在实际应用中，这里应该跳转到对应的公告详情页
      const newUrl = `${window.location.pathname}?businessId=${id}`
      window.location.href = newUrl
    },

    // 返回上一页
    goBack() {
      window.history.back()
    }
  }
}
</script>
<style scoped>
.content {
    white-space: pre-line;
}
    .header {
  background: rgb(26, 41, 128) !important;
  color: white;
  padding: 16px;
  display: flex;
  align-items: center;
  position: relative;
    }

    .header-content {
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .header-title {
      font-size: 1.2rem;
      font-weight: 600;
    }

    .notice-container {
      max-width: 800px;
      margin: 20px auto;
      padding: 0 15px;
    }

    .notice-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      margin-bottom: 30px;
    }

    .notice-header {
      padding: 20px 20px 15px;
      border-bottom: 1px solid #f0f0f0;
    }

    .notice-title {
      font-size: 1.4rem;
      font-weight: bold;
      margin-bottom: 12px;
      line-height: 1.4;
      color: #1a2980;
    }

    .notice-meta {
      display: flex;
      align-items: center;
      color: #666;
      font-size: 0.9rem;
    }

    .meta-item {
      display: flex;
      align-items: center;
      margin-right: 20px;
    }

    .meta-item i {
      margin-right: 5px;
      color: #26d0ce;
    }

    .notice-content {
      padding: 25px 20px;
      line-height: 1.8;
      font-size: 1rem;
      color: #333;
    }

    .notice-content p {
      margin-bottom: 20px;
      text-align: justify;
    }

    .notice-footer {
      background: #f9f9f9;
      padding: 15px 20px;
      border-top: 1px solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .notice-source {
      color: #666;
      font-size: 0.9rem;
    }

    .notice-actions {
      display: flex;
      gap: 15px;
    }

    .action-btn {
      display: flex;
      align-items: center;
      color: white;
      border: none;
      padding: 8px 15px;
      border-radius: 20px;
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.3s;
      height: 35px;
      background: #1a2980;
    }

    .action-btn i {
      margin-right: 5px;
    }

    .action-btn.prev {
      background: #f0f2f5;
      color: #666;
    }

    .action-btn.prev:hover {
      background: #e0e3e9;
    }

    .nav-info {
      text-align: center;
      color: #666;
      font-size: 0.9rem;
      margin: 10px 0 30px;
    }

    .related-notices {
      margin-top: 30px;
    }

    .section-title {
      font-size: 1.1rem;
      font-weight: bold;
      margin-bottom: 15px;
      color: #1a2980;
      padding-left: 10px;
      border-left: 4px solid #26d0ce;
    }

    .related-list {
      display: grid;
      gap: 15px;
    }

    .related-item {
      background: white;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: all 0.3s;
      cursor: pointer;
    }

    .related-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .related-title {
      font-size: 1rem;
      font-weight: 500;
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .related-meta {
      display: flex;
      color: #888;
      font-size: 0.8rem;
    }

    .related-date {
      margin-right: 15px;
    }

    .footer {
      text-align: center;
      padding: 30px 15px 20px;
      color: #888;
      font-size: 0.85rem;
      background: #f0f2f5;
    }

    @media (max-width: 600px) {
      .notice-title {
        font-size: 1.2rem;
      }

      .notice-content {
        padding: 20px 15px;
        font-size: 0.95rem;
      }

      .notice-footer {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
      }

      .notice-actions {
        width: 100%;
        justify-content: space-between;
      }
    }
  </style>
